<template>
    <sky-base-page bg-page-color="#fff">
        <template #header>
            <view class="search-box">
                <up-search placeholder="请输入商品名称" v-model="keyword"></up-search>
            </view>
        </template>
        <view class="content-box">
            <view class="left-box">
                <sky-base-page :api-obj="qly.api.user.goodsCategory.index" type="data"
                               bg-page-color="#f5f5f5" @success="categoryData">
                    <template #default="{dataInfo}">
                        <view class="class-item" :class="{active:index===activeIndex}" v-for="(item,index) in dataInfo"
                              :key="item" @tap="selectClass(index)">
                            {{ item.name}}
                        </view>
                    </template>
                </sky-base-page>
            </view>
            <view class="right-box">
                <sky-base-page :api-obj="qly.api.user.goods.index" :params="{goods_category_id:categoryList[activeIndex]?.id}" type="list" bg-page-color="#fff">
                    <template #default="{dataList}">
                        <view class="goods-container">
                            <view class="class-img">
                                <image class="image" src="/static/images/classimg.png" mode="aspectFill"/>
                            </view>
                            <up-gap height="10"></up-gap>
                            <up-loadmore line status="nomore" :nomore-text="categoryList[activeIndex]?.name"/>
                            
                            <goodsCard :dataList="dataList"/>
                        </view>
                    </template>
                </sky-base-page>
            </view>
        </view>
    </sky-base-page>
</template>
<script setup>
import goodsCard from './components/goodsCard.vue'

const list1 = ref([
    'http://www.skyblue.com/uploads/20251016/8c99ecf831b3b7bdc17f9351c33795a3.png',
    'http://www.skyblue.com/uploads/20251016/8c99ecf831b3b7bdc17f9351c33795a3.png',
    'http://www.skyblue.com/uploads/20251016/8c99ecf831b3b7bdc17f9351c33795a3.png',
]);

const activeIndex = ref(0)
const selectClass = (index) => {
    activeIndex.value = index
}
const categoryList = ref([])

const categoryData=(list)=>{
    categoryList.value = list
}
</script>
<style scoped lang="scss">
.search-box {
    padding: 24rpx;
    box-sizing: border-box;
}

.content-box {
    height: 100%;
    display: flex;
    gap: 12rpx;
    
    .left-box {
        height: 100%;
        width: 180rpx;
        
        .class-item {
            color: #909193;
            padding: 18rpx;
            box-sizing: border-box;
            text-align: center;
        }
        
        .active {
            color: #B07F63;
            background-color: #fff;
        }
    }
    
    .right-box {
        flex: 1;
        padding: 24rpx;
        box-sizing: border-box;
        
        .goods-container {
            .class-img {
                width: 100%;
                height: 180rpx;
                border-radius: 12rpx;
                overflow: hidden;
                
                .image {
                    width: 100%;
                    height: 100%;
                }
            }
        }
    }
}
</style>
